@charset "utf-8";

/* Remove default browser margin and border. */

* {
	margin : 0;
/*	border : 0;*/
}

/* Floating and clearing. */

.left {
	float : left;
}

.right {
	float : right;
} 

.clear {
	clear : both;
}

#error-label, #success-label, #play-on-server, #playlists-window-show, #login-panel
	,#main-panel, #browse-album, #info-panel, #toplist-container{
	display: none;
}

select{
	font-size: 18px;
}

/* HTML and body elements. */

html {
	background-color : #F0F0F0;
	font-size        : 62.5%; /* 10px */
	font-family      : Tahoma, sans-serif;
	color            : #003E88;
	line-height      : 1.2;
	height           : 100%;
}

body {
	text-align : center;
	font-size  : 1.1em; /* 11px */
	height     : 100%;
}

img {
	border : 0;
}

/* Text: headlines, paragraph, small text. */

h1 {
	font-size : 2.2em;
}

h2 {
	font-size : 2.0em;
}

h3 {
	font-size : 1.8em;
}

h4 {
	font-size : 1.6em;
}

h5 {
	font-size : 1.4em;
}

h6 {
	font-size : 1.2em;
}

p {
	font-weight : normal;
	text-align  : justify;
	margin      : 10px 0px 10px 0px;
}

/* Images. */

img {
	margin-bottom : -3px;
}

/* Links */

a:link, a:visited {
	font-weight     : bold;
	color           : #003E88;
	text-decoration : none;
}

a:hover, a:focus {
	color           : #003E88;
	text-decoration : underline;
}

/* Table: th, td, odd and even rows. */

table {
	width : 100%;
}

th {
	text-align       : left;
	background-color : #F0F0F0;
}

th.header {
	background-image    : url('images/th.gif');
	cursor              : pointer;
	background-repeat   : no-repeat;
	background-position : center left;
	padding-left        : 20px;
	border              : 1px solid #E0E0E0;
}

th.headerSortUp {
	background-image : url('images/th-asc.gif');
}

th.headerSortDown {
	background-image : url('images/th-desc.gif');
}

td {
	text-align : left;
}

tr:nth-child(odd) {
	background-color : #F0F0F0;
}

tr:nth-child(even) {
	background-color : #F8F8F8;
}

/* Album table. */

#album-table > tbody > tr > td:first-child {
	text-align : right;
	width      : 35px;
}

#album-table > tbody > tr > td:nth-child(3), #album-table > thead > tr > th:nth-child(3) {
	text-align : right;
	width      : 40px;
}

/* Form elements. */

input {
	font-family : Tahoma, sans-serif;
	font-size   : 18px;
	max-width   : 200px;
	padding     : 2px;
}

/* Site. */

#container {
	margin-left      : auto;
	margin-right     : auto;
	padding          : 15px;
	width        : 960px;
}

#header {
	padding : 15px;
	width   : 100%;
}

.content {
	padding          : 15px;
	background-color : #FFFFFF;
	border           : 2px solid #BBBBBB;
	width            : 100%;
	text-align       : left;
	min-height: 50px;
}

#footer {
	color      : #888888;
	padding    : 15px;
	width      : 100%;
	text-align : right;
}

#info-label {
	background-image    : url('images/information.png');
	background-position : center left;
	background-repeat   : no-repeat;
	padding             : 2px 2px 2px 20px;
}

#error-label {
	background-image    : url('images/exclamation.png');
	background-position : center left;
	background-repeat   : no-repeat;
	padding             : 2px 2px 2px 20px;
}




#success-label {
	background-image    : url('images/accept.png');
	background-position : center left;
	background-repeat   : no-repeat;
	padding             : 2px 2px 2px 20px;
}

#playlists-window-show {
	background-image    : url('images/music.png');
	background-position : center left;
	background-repeat   : no-repeat;
	padding             : 2px 2px 2px 20px;
}

#play-on-server {
	background-image    : url('images/server.png');
	background-position : center left;
	background-repeat   : no-repeat;
	padding             : 2px 2px 2px 20px;
}

#playing-label {
	width   : 350px;
	height  : 50px;
	padding : 15px;
}

#cover-label {
	width  : 120px;
	height : 120px;
	border: 1px solid black;
}

.popularity-indicator {
	width               : 100px;
	height              : 10px;
	background-image    : none;
	background-position : 50% 50%;
	background-repeat   : no-repeat;
}

.collapsible {
	padding: 0 0 3px 0;
}

.collapsible a.collapsed {
	margin: 2px;
	display: block;
	width: 15px;
	height: 15px;
	background: url(tablesorter_expand.png) no-repeat 3px 3px;
	outline: 0;
}

.collapsible a.expanded {
	margin: 2px;
	display: block;
	width: 15px;
	height: 15px;
	background: url(tablesorter_expand.png) no-repeat -24px 3px;
	outline: 0;
}

/******************************************************************************/
/******************************** jqModal *************************************/
/******************************************************************************/

/* jqModal base Styling courtesy of;
	Brice Burgess <bhb@iceburg.net> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
	the Window's z-index value will be set to 3000 by default (via jqModal.js). */

.jqmWindow {
    display               : none;
    position              : fixed;
    top                   : 20%;
    left                  : 50%;
    color                 : #003E88;
 	background-color      : #F0F0F0;
	margin-left           : -150px;
	width                 : 300px;
	padding               : 0;
	border                : 1px solid #003E88;
	border-radius         : 5px;
	-moz-border-radius    : 5px;
	-webkit-border-radius : 5px;
}

.jqmContent {
	padding    : 10px;
	text-align : left;
}

.jqmContent a:link, .jqmContent a:visited, .jqmContent a:active {
	font-weight     : bold;
	color           : #003E88;
	text-decoration : none;
}

.jqmContent a:hover, .jqmContent a:focus {
	font-weight     : bold;
	color           : #003E88;
	text-decoration : none;
}

.jqmHeader {
	background-color : #003E88;
	color            : #FFFFFF;
	padding          : 5px 5px 5px 10px;
	cursor           : move;
	font-weight      : bold;
}

.jqmOverlay {
	background-color: #0F0F0F;
}

/* Background iframe styling for IE6. Prevents ActiveX bleed-through (<select> form elements, etc.) */
* iframe.jqm {position:absolute;top:0;left:0;z-index:-1;
	width: expression(this.parentNode.offsetWidth+'px');
	height: expression(this.parentNode.offsetHeight+'px');
}

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}
